window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
    preview_img.addEventListener('mousemove',function(e){
            var x = e.pageX - this.offsetLeft
            var Y = e.pageY - this.offsetTop
            maskX = x- mask.offsetWidth/2 
            maskY = Y- mask.offsetHeight/2 
            if(maskX <=0 ){
                maskX = 0+'px'
            }else if(maskX>=this.offsetWidth-mask.offsetWidth) {
                maskX=this.offsetWidth-mask.offsetWidth 
            }
            var maskMax = preview_img.offsetWidth - mask.offsetWidth;
            if( maskY<=0){
                maskY = 0
            }else if( maskY>=this.offsetHeight-mask.offsetHeight) {
                maskY=this.offsetHeight-mask.offsetHeight 
            }
            mask.style.left  = maskX+'px'
            mask.style.top = maskY+'px'
              // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';
    })


})